import React, {useEffect, useRef} from "react";

const Chat = () => {

    const wrapper = useRef();

    useEffect(() => {
        init();
    }, []);


    const messages = [
        {
            code: 'system',
            data: {
                text: '阿里云智能对话机器人为您服务',
            },
        },
        {
            code: 'text',
            data: {
                text: '文本消息',
            },
            meta: {
                evaluable: true,
            },
        },
        {
            code: 'knowledge',
            data: {
                text: '知识消息, 我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错',
            },
            meta: {
                evaluable: true,
            },
        },
        {
            code: 'text',
            position: 'right',
            data: {
                text: '你好',
            },
        },
        {
            code: 'mix',
            data: {
                list: [
                    {
                        code: 'text',
                        data: {
                            text: '你好，我是一条混合格式消息',
                        },
                    },
                    {
                        code: 'image',
                        data: {
                            picUrl:
                                'https://gw.alicdn.com/tfs/TB1j2Y3xUY1gK0jSZFMXXaWcVXa-602-337.png',
                        },
                    },
                    {
                        code: 'knowledge',
                        data: {
                            text: '知识消息, 我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错.我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错。我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错。<br />我是一条知识消息，我是阿里云智能客服机器人，你好，今天天气不错',
                        },
                    },
                ],
                suffixList: [{code: 'text', data: {text: '追加内容'}}],
            },
            meta: {
                evaluable: true,
            },
        },
        {
            code: 'foundation-model',
            data: {
                content:
                    '对话机器人 POC 环境地址是： http://poc-console.alixiaomi.com:8081/',
                sentenceList: [
                    {
                        content:
                            '以下是2024款G9个性化/外观颜色配置表的信息：\n\n| 车型名称 | 570 | 570Pro | 570Max | 702 | 702Pro | 702Max | 650 | 650Max |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| 星云白 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 暗夜黑 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 新月银 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 星阙灰 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 星际绿 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 内饰颜色 |\n| 气宇灰 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 晨灰棕 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n| 星夜黑 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 | 选装 |\n\n备注：\n- “标配”代表标配，\n- “选装”代表选配，\n- “无”代表无此配置，\n- “￥”代表选配价格。\n\n如需进一步详情或具体价格，请告知。',
                    },
                ],
                relatedQuestionList: [
                    {content: '测试关联问1'},
                    {content: '测试关联问2'},
                ],
                streamEnd: true,
            },
            meta: {
                evaluable: true,
            },
        },
    ];

    const init = () => {

        try {
            const bot = new ChatSDK({
                root: wrapper.current,
                messages: messages,
                avatarWhiteList: ['all'],
                config: {
                    // 头像白名单
                    //avatarWhiteList: ['knowledge', 'recommend'],
                    robot: {
                        avatar: '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg',
                    },

                    // 用户头像
                    user: {
                        avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg',
                    },


                    // 首屏消息
                    messages: [
                        {
                            type: 'system',
                            content: {
                                text: '智能助理进入对话，为您服务',
                            },
                        },
                        {
                            type: 'text',
                            content: {
                                text: '智能助理为您服务，请问有什么可以帮您？',
                            },
                        },
                        {
                            type: 'card',
                            content: {
                                code: 'switch-location',
                            },
                        },
                    ],
                    // 快捷短语
                    quickReplies: [
                        {
                            name: '发送文本',
                            isHighlight: true,
                        },
                        {
                            name: '可见文本',
                            type: 'text',
                            text: '实际发送的文本',
                            isNew: true,
                        },
                        {
                            name: '点击跳转',
                            type: 'url',
                            url: 'https://www.taobao.com/',
                        },
                        {
                            name: '唤起卡片',
                            type: 'card',
                            card: {code: 'knowledge', data: {}},
                        },
                        {
                            name: '执行指令',
                            type: 'cmd',
                            cmd: {code: 'agent_join'},
                        },
                    ],


                },

                requests: {

                    send(msg) {
                        console.log('msg:', msg);
                        return {
                            code: 'text',
                            data: {
                                text: `好的, ${msg.data.text}`,
                            },
                        }

                    },
                },

            });
            bot.run();

        } catch (e) {
            console.log(e);
        }
    }


    return <div style={{height: '100%'}} ref={wrapper}/>;

}
export default Chat